<template>
    <div class="myColumn">
      <div class="my-title">霍兰德测试结果</div>
      <dir class="radar-con"><div id="radar" style="width: 600px;height: 400px;"></div></dir>
      <div class="result-show">您的霍兰德职业倾向分析结果为: {{recommendSubject.jg}}（{{allSpecialty[recommendSubject.jg[0]]}} {{resultCount[recommendSubject.jg[0]]}} + {{allSpecialty[recommendSubject.jg[1]]}} {{resultCount[recommendSubject.jg[1]]}} + {{allSpecialty[recommendSubject.jg[2]]}} {{resultCount[recommendSubject.jg[2]]}}）</div>
      <div class="result-profession">适合职业: {{recommendSubject.dyzy}}</div>
      <div class="result-major">参考专业: {{recommendSubject.dyzy}}</div>
    </div>
</template>

<script>
//引入底部导航组件
export default {
  name: 'result',
  data() {
    return {
      recommendSubject: '',
      resultCount: {},
      allSpecialty:{'A': '艺术型A', 'E': '管理型E', 'C': '常规型C', 'I': '研究型I', 'R': '现实型R', 'S': '社会型S'},
      allIndex: []
    };
  },
  created() {
     console.log(this.$route.query.resultCount)
     
     this.recommendSubject = this.$route.query.recommendSubject;
     this.resultCount = this.$route.query.resultCount;
     this.allIndex = '' + this.recommendSubject.jg
  },
  methods: {
    drawRadar() {
      //基于准备好的dom，初始化echarts实例
      let myRadar = this.$echarts.init(document.getElementById('radar'));
      //绘制图表
       // 各个维度的最大值
      var dataMax = [
        {
          name: '艺术:A',
          max: 10,
        },
        {
          name: '管理:E',
          max: 10
        },
        {
          name: '常规:C',
          max: 10
        },
        {
          name: '研究:I',
          max: 10
        },
        {
          name: '实际:R',
          max: 10
        },
        {
          name: '社会:S',
          max: 10
        }
      ]

      var option = {
        tooltip: {  //配置详情提示框组件
          //设置雷达图的tooltip不会超出div，也可设置position属性
          //设置定位不会随着鼠标移动而变化
          confine: true,  //设置是否将tooltip框限制在图表的区域内
          enterable: true,  //设置鼠标是否可以移动到tooltip区域内
        },
        radar: {
          indicator: dataMax,  //配置各个维度的最大值
          center: ['45%', '50%'], // 位置
          name: {
            textStyle: {
              color: 'black'
            }
          },
        },
        series: [
          {
            type: 'radar',
            data: [
              {
                name: '考核情况',
                value: [this.resultCount['A'], this.resultCount['E'], this.resultCount['C'], 
                        this.resultCount['I'], this.resultCount['R'], this.resultCount['S']],
                areaStyle: {
                  normal: {
                      color: 'rgba(218, 51, 53, 0.6)' // 选择区域颜色
                  }
                }
              },
            ]
          }
        ]
      }
      myRadar.setOption(option)
      

    }
  },
  mounted() {
    this.drawRadar()
  },

}
</script>

<style>

.myColumn {
  margin-top: 60px;
  margin-left: 50px;
  width: 1325px;
  height: 720px;
  background: #fff;
  border-radius: 5%;
  /* text-align: center; */
  /* align-items: center; */
}

.my-title{
  color: black;
  font-size: 24px;
  text-align: center;
}

.radar-con {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#radar {
  width: 50%;
  height: 30em;
  margin-top: 10px;
  color:black
}

.result-show{
   margin-left: 30px;
    margin-right: 135px;
    margin-top: 40px;
    font-size: 22px;
}

.result-profession {
  margin-left: 30px;
  margin-right: 135px;
  margin-top: 40px;
  font-size: 22px;
}

.result-major {
  margin-left: 30px;
  margin-right: 65px;
  margin-top: 45px;
  font-size: 22px;
}
</style>
